<template>
  <div class="app-container decoration">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
<!--      <el-form-item label="预算金额" prop="budgetAmount">-->
<!--        <el-select v-model="queryParams.budgetAmount" placeholder="选择预算金额" clearable size="small">-->
<!--          <el-option-->
<!--            v-for="dict in sys_budget_amount"-->
<!--            :key="dict.dictValue"-->
<!--            :label="dict.dictLabel"-->
<!--            :value="dict.dictValue"-->
<!--          />-->
<!--        </el-select>-->
<!--      </el-form-item>-->
      <el-form-item label="房屋类型" prop="houseType">
        <el-select v-model="queryParams.houseType" placeholder="选择房屋类型" clearable size="small">
          <el-option
            v-for="dict in sys_house_type"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="几居室" prop="roomsNumber">
        <el-select v-model="queryParams.roomsNumber" placeholder="选择几居室" clearable size="small">
          <el-option
            v-for="dict in sys_rooms_number"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="家庭状态" prop="familyStatus">
        <el-select v-model="queryParams.familyStatus" placeholder="选择家庭状态" clearable size="small">
          <el-option
            v-for="dict in sys_family_status"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="喜好风格" prop="favoriteStyle">
        <el-select v-model="queryParams.favoriteStyle" placeholder="选择喜好风格" clearable size="small">
          <el-option
            v-for="dict in sys_favorite_style"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>


    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:decoration:add']"
        >新增
        </el-button>
      </el-col>
      <!--          <el-col :span="1.5">-->
      <!--            <el-button-->
      <!--              type="success"-->
      <!--              icon="el-icon-edit"-->
      <!--              size="mini"-->
      <!--              :disabled="single"-->
      <!--              @click="handleUpdate"-->
      <!--              v-hasPermi="['system:decoration:edit']"-->
      <!--            >修改</el-button>-->
      <!--          </el-col>-->
      <!--          <el-col :span="1.5">-->
      <!--            <el-button-->
      <!--              type="danger"-->
      <!--              icon="el-icon-delete"-->
      <!--              size="mini"-->
      <!--              :disabled="multiple"-->
      <!--              @click="handleDelete"-->
      <!--              v-hasPermi="['system:decoration:remove']"-->
      <!--            >删除</el-button>-->
      <!--          </el-col>-->
      <!--          <el-col :span="1.5">-->
      <!--            <el-button-->
      <!--              type="warning"-->
      <!--              icon="el-icon-download"-->
      <!--              size="mini"-->
      <!--              @click="handleExport"-->
      <!--              v-hasPermi="['system:decoration:export']"-->
      <!--            >导出</el-button>-->
      <!--          </el-col>-->
    </el-row>

    <el-table v-loading="loading" :data="decorationList">
      <!--      <el-table-column type="selection" width="55" align="center" />   @selection-change="handleSelectionChange"-->

<!--      <el-table-column label="预算金额" align="center" prop="budgetAmount" :formatter="sysAmountFormat"/>-->
      <el-table-column label="房屋类型" align="center" prop="houseType" :formatter="sysTypeFormat"/>
      <el-table-column label="几居室" align="center" prop="roomsNumber" :formatter="sysNumberFormat"/>
      <el-table-column label="家庭状态" align="center" prop="familyStatus" :formatter="sysStatusFormat"/>
      <el-table-column label="喜好风格" align="center" prop="favoriteStyle" :formatter="sysStyleFormat"/>
      <el-table-column label="最小面积" align="center" prop="minimumArea" />
      <el-table-column label="最大面积" align="center" prop="maximumArea" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope"  >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:decoration:edit']"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:decoration:remove']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改整屋装修对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="700px">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px" >
<!--        <el-form-item label="预算金额" prop="budgetAmount">-->
<!--          <el-select v-model="form.budgetAmount" placeholder="选择预算金额" clearable size="small">-->
<!--            <el-option-->
<!--              v-for="dict in sys_budget_amount"-->
<!--              :key="dict.dictValue"-->
<!--              :label="dict.dictLabel"-->
<!--              :value="dict.dictValue"-->
<!--            />-->
<!--          </el-select>-->
<!--        </el-form-item>-->

        <el-row>
          <el-col :span="12">
            <el-form-item label="最小面积/m²" prop="minimumArea">
              <el-input v-model.number="form.minimumArea"  oninput = "value=value.replace(/[^\d]/g,'')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最大面积/m²" prop="maximumArea">
              <el-input v-model.number="form.maximumArea" oninput = "value=value.replace(/[^\d]/g,'')" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="房屋类型" prop="houseType">
              <el-select v-model="form.houseType" placeholder="选择房屋类型" clearable size="small">
                <el-option
                  v-for="dict in sys_house_type"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="几居室" prop="roomsNumber">
              <el-select v-model="form.roomsNumber" placeholder="选择几居室" clearable size="small">
                <el-option
                  v-for="dict in sys_rooms_number"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="12">
            <el-form-item label="家庭状态" prop="familyStatus">
              <el-select v-model="form.familyStatus" placeholder="选择家庭状态" clearable size="small">
                <el-option
                  v-for="dict in sys_family_status"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="喜好风格" prop="favoriteStyle">
              <el-select v-model="form.favoriteStyle" placeholder="选择喜好风格" clearable size="small">
                <el-option
                  v-for="dict in sys_favorite_style"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>





        <el-form-item label="关联瞬间" class="guanlian" >
<!--          <el-checkbox-group v-if="momentList.length>0" v-model="form.momentId"  size="mini" @change="changeCheckbox"  style="height: 200px;overflow-y: auto" >-->
<!--            <el-checkbox v-for="(items,i) in momentList" :label='items.momentId' :key="items.momentId">{{items.name}}</el-checkbox>-->
<!--          </el-checkbox-group>-->
          <el-select
            @change="changeCheckbox"
            v-model="form.momentId"
            multiple
            value-key='momentId'
            name="label"
            filterable
            allow-create

            default-first-option
            :allow-create="false"
            placeholder="请选择瞬间">
<!--            <el-option-->
<!--              v-for="item in momentList"-->
<!--              :key="item.momentId"-->
<!--              :label="item.name"-->
<!--              :value="item.momentId">-->
<!--            </el-option>-->


<!--                          :key="item.momentId"   -->
            <el-option
              v-for="item in momentList"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>


    </el-dialog>
  </div>
</template>

<script>
  import {
    listDecoration,
    getDecoration,
    delDecoration,
    addDecoration,
    updateDecoration,
    exportDecoration,
    momentList
  } from '@/api/system/decoration'
  // import { listMoment, getMoment, delMoment, addMoment, updateMoment, exportMoment } from "@/api/system/moment";
  export default {
    name: 'Decoration',
    data() {
      // maximumAreaPass:{},
      var maximumAreaPass = (rule, value, callback) => {
        if (value < 0 ) {
          callback(new Error('不可为负值！'));
        } else {
          callback();
        }
      };
      // minimumAreaPass:{},
      var minimumAreaPass = (rule, value, callback) => {
        if (value < 0 ) {
          callback(new Error('不可为负值！'));
        } else {
          callback();
        }
      };
      return {
        checkList:[],
        momentList:[],
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        // 整屋装修表格数据
        decorationList: [],
        // 弹出层标题
        title: '',
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          // mobileUserId: undefined,
          // budgetAmount: undefined,
          houseType: undefined,
          roomsNumber: undefined,
          familyStatus: undefined,
          favoriteStyle: undefined,
        },
        // 查询参数
        momentParams: {
          pageNum: 1,
          pageSize: 10,
          momentType: undefined,
          name: undefined,
          detail: undefined,
          videoUrl: undefined,
          status: undefined,
          momentAttr:undefined,
        },
        // 表单参数
        form: {
          momentId:[]
        },
        // 表单校验
        rules: {
          houseType: [
            { required: true, message: '不能为空', trigger: 'blur'},
          ],
          roomsNumber: [
            { required: true, message: '不能为空', trigger: 'blur'},
          ],
          familyStatus: [
            { required: true, message: '不能为空', trigger: 'blur'},
          ],
          favoriteStyle: [
            { required: true, message: '不能为空', trigger: 'blur'},
          ],
          // budgetAmount:[
          //   { required: true, message: '不能为空', trigger: 'blur'},
          // ],
          maximumArea:[
            { required: true, message: '面积不能为空', trigger: 'blur'},
            // { type: 'number', message: '面积必须为数字值', trigger: 'blur'},
            { validator: maximumAreaPass, trigger: 'blur'}
          ],
          minimumArea:[
            { required: true, message: '面积不能为空', trigger: 'blur'},
            // { type: 'number', message: '面积必须为数字值', trigger: 'blur,change'},
            {  validator: minimumAreaPass,  trigger: 'blur'}
          ],
        },

        // 房屋喜欢的风格sys_favorite_style
        sys_favorite_style: [],
        // 房屋几居室sys_rooms_number
        sys_rooms_number: [],
        // 房屋家庭状态sys_family_status
        sys_family_status: [],
        // // 房屋预算金额sys_budget_amount
        // sys_budget_amount: [],
        // 房屋户型sys_house_type
        sys_house_type: []
      }
    },
    created() {

      // 房屋喜欢的风格sys_favorite_style
      this.getDicts('sys_favorite_style').then(response => {
        // console.log(response)
        this.sys_favorite_style = response.data
      })
      // 房屋几居室sys_rooms_number
      this.getDicts('sys_rooms_number').then(response => {
        // console.log(response)
        this.sys_rooms_number = response.data
      })
      // 房屋家庭状态sys_family_status
      this.getDicts('sys_family_status').then(response => {
        // console.log(response)
        this.sys_family_status = response.data
      })
      // // 房屋预算金额sys_budget_amount
      // this.getDicts('sys_budget_amount').then(response => {
      //   // console.log(response)
      //   this.sys_budget_amount = response.data
      // })
      // 房屋户型sys_house_type
      this.getDicts('sys_house_type').then(response => {
        // console.log(response)
        this.sys_house_type = response.data
      })

      this.getList()
    },
    watch: {
      form:{
        handler:function(val,oldval){
          console.log(val.momentId)

        },
        deep:true//对象内部的属性监听，也叫深度监听
      },
    },
    methods: {
      //changeCheckbox
      changeCheckbox(e){
        console.log(e)
        console.log(this.form.momentId)
      },
      // 房屋喜欢的风格sys_favorite_style
      sysStyleFormat(row, column) {
        // console.log(row)
        return this.selectDictLabel(this.sys_favorite_style, row.favoriteStyle)
      },
      // 房屋几居室sys_rooms_number
      sysNumberFormat(row, column) {
        return this.selectDictLabel(this.sys_rooms_number, row.roomsNumber)
      },
      // 房屋家庭状态sys_family_status
      sysStatusFormat(row, column) {
        return this.selectDictLabel(this.sys_family_status, row.familyStatus)
      },
      // // 房屋预算金额sys_budget_amount
      // sysAmountFormat(row, column) {
      //   return this.selectDictLabel(this.sys_budget_amount, row.budgetAmount)
      // },
      // 房屋户型sys_house_type
      sysTypeFormat(row, column) {
        return this.selectDictLabel(this.sys_house_type, row.houseType)
      },
      /** 查询整屋装修列表 */
      getList() {
        this.loading = true

        momentList().then(response => {
          console.log('查询平台精彩瞬间列表',response)
          var arr = []
          response.data.forEach((items,i)=>{
            var obj = {
              value:items.momentId,
              label:items.name
            }
            arr.push(obj)
          })

          this.momentList = arr


          // this.momentList = response.data
          // this.loading = false;
          // momentList
        });

        listDecoration(this.queryParams).then(response => {
          console.log('查询整屋装修列表返回值',response)
          // response.rows.forEach()
          this.decorationList = response.rows
          this.total = response.total
          this.loading = false
        })



      //  momentList
      },
      // 取消按钮
      cancel() {
        this.open = false
        this.reset()
      },
      // 表单重置
      reset() {
        this.form = {
          decorationId: undefined,
          // mobileUserId: undefined,
          // budgetAmount: undefined,
          houseType: undefined,
          roomsNumber: undefined,
          familyStatus: undefined,
          favoriteStyle: undefined,
          // remark: undefined,
          createBy: undefined,
          createTime: undefined,
          maximumArea:undefined,
          minimumArea:undefined,
          momentId:[],
        }
        this.resetForm('form')
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1
        this.getList()
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm('queryForm')
        this.handleQuery()
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.decorationId)
        this.single = selection.length != 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset()
        this.open = true
        this.title = '添加整屋装修'
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        console.log(row)
        this.reset()
        const decorationId = row.decorationId || this.ids
        getDecoration(decorationId).then(response => {
          console.log('momentList',this.momentList)
          console.log('修改按钮操作response',response)
          if (response.data.momentId.length>0){
            response.data.momentId.forEach((items,i)=>{
              items = parseInt(items)
              console.log(typeof (items))
            })
          }
          console.log(response.data.momentId)
          this.form = response.data
          this.open = true
          this.title = '修改整屋装修'
        })
      },
      /** 提交按钮 */
      submitForm: function() {
        this.$refs['form'].validate(valid => {
          if (valid) {
            if (this.form.decorationId != undefined) {
              updateDecoration(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess('修改成功')
                  this.open = false
                  this.getList()
                } else {
                  this.msgError(response.msg)
                }
              })
            } else {
              addDecoration(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess('新增成功')
                  this.open = false
                  this.getList()
                } else {
                  this.msgError(response.msg)
                }
              })
            }
          }
        })
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const decorationIds = row.decorationId || this.ids
        this.$confirm('是否确认删除整屋装修编号为"' + decorationIds + '"的数据项?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function() {
          return delDecoration(decorationIds)
        }).then(() => {
          this.getList()
          this.msgSuccess('删除成功')
        }).catch(function() {
        })
      },
      /** 导出按钮操作 */
      handleExport() {
        const queryParams = this.queryParams
        this.$confirm('是否确认导出所有整屋装修数据项?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function() {
          return exportDecoration(queryParams)
        }).then(response => {
          this.download(response.msg)
        }).catch(function() {
        })
      }
    }
  }
</script>
<style scoped>
  .decoration .guanlian .el-select{
      width: 100%!important;
  }
</style>


<!--    <el-row :gutter="10" class="mb8">-->
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="primary"-->
<!--          icon="el-icon-plus"-->
<!--          size="mini"-->
<!--          @click="handleAdd"-->
<!--          v-hasPermi="['system:decoration:add']"-->
<!--        >新增</el-button>-->
<!--      </el-col>-->
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="success"-->
<!--          icon="el-icon-edit"-->
<!--          size="mini"-->
<!--          :disabled="single"-->
<!--          @click="handleUpdate"-->
<!--          v-hasPermi="['system:decoration:edit']"-->
<!--        >修改</el-button>-->
<!--      </el-col>-->
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="danger"-->
<!--          icon="el-icon-delete"-->
<!--          size="mini"-->
<!--          :disabled="multiple"-->
<!--          @click="handleDelete"-->
<!--          v-hasPermi="['system:decoration:remove']"-->
<!--        >删除</el-button>-->
<!--      </el-col>-->
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="warning"-->
<!--          icon="el-icon-download"-->
<!--          size="mini"-->
<!--          @click="handleExport"-->
<!--          v-hasPermi="['system:decoration:export']"-->
<!--        >导出</el-button>-->
<!--      </el-col>-->
<!--    </el-row>-->
